{% extends 'layout.html' %}
{% load static %}
{% block CSS %}
    <link rel="stylesheet" href="{% static 'elementui/theme-chalk/index.css' %}">

    <style>
        .tableuy {

            position: absolute;
            top: 10px;
            left: 5%;

        }

        .nav_table {
            display: flex;
            justify-content: right;
            align-items: center;
            margin-bottom: 10px;
            margin-right: 30px;

        }


        .add_but_style {
            margin-right: 10px;
        }


        .uy {
            position: absolute;
            top: 10px;
            left: 10%;
        }

        .table_check {
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .table_check input[type=checkbox] {
            width: 50px;
            background-color: #f0f0f0;


        }

        .table_check input[type=text] {
            width: 300px;
        }

        .table_check select {
            width: 400px;
        }

        .searchinput {
            width: 400px;
        }

        .resource-page {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .sort_style {


            background-color: blue;
            position: absolute;
            top: 0;
            left: 0;
        }

    </style>


{% endblock %}

{% block content %}
    <div id="app" class="tableuy" style="width: 90%;position:relative; margin-top: 10px">
        <div class="nav_table">

            <el-button icon="el-icon-download" type="primary" style="margin-right: 10px" plain @click="exportExcel">
                导出数据
            </el-button>

            <el-input placeholder="请输入姓名进行查找" style="width: 300px" v-model="inputText" clearable
                      @clear="receive_data()">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
        </div>


        <div class="panel panel-default">

            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true" style="margin-right: 2px"></span>
                员工列表
            </div>
            <div class="panel-body">
                <el-table
                        :cell-style="rowStyle"
                        :header-cell-style="headStyle"
                        :data="schArr"
                        v-loading="loading"
                        border
                        stripe
                        style="width: 100%;text-align: center"
                        @sort-change="sortChange"
                        max-height="600">
                    <el-table-column

                            sortable="custom"
                            prop="staff_num"
                            label="员工编号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed
                            sortable="custom"
                            prop="name"
                            label="姓名"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="level"
                            label="权限级别"
                            width="100">

                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="team_id"
                            label="所属团队"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            sortable="custom"
                            prop="customer_count"
                            label="名下客户总数"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            sortable="custom"
                            prop="financial_product_count"
                            label="保证金理财产品签约数"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            sortable="custom"
                            prop="fund_products_count"
                            label="货币基金产品配置客户数数"
                            width="90">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="investment_assets_count"
                            label="固定收益产品配置客户数"
                            width="80">
                    </el-table-column>


                    <el-table-column
                            sortable="custom"
                            prop="add_weChat_count"
                            label="企业微信客户添加数"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="contract_stock_count"
                            label="股票50签约数"
                            width="50">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="yield_enhanced_products_count"
                            label="量化T+0签约数"
                            width="50">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="equity_public_offering_count"
                            label="权益公募配置客户数"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="small_t_one_assets_count"
                            label="公募50配置客户数"
                            width="50">
                    </el-table-column>


                    <el-table-column
                            sortable="custom"
                            prop="stock_financing_count"
                            label="两融业务签约数"
                            width="100">
                    </el-table-column>


                    <el-table-column
                            sortable="custom"
                            prop="more_t_one_assets_count"
                            label="百万T1签约数"
                            width="50">
                    </el-table-column>


                    <el-table-column
                            sortable="custom"
                            prop="Private_equity_products_count"
                            label="百万私募签约数"
                            width="100">
                    </el-table-column>


                    <el-table-column
                            sortable="custom"
                            prop="configure_China_count"
                            label="中国50签约数"
                            width="70">
                    </el-table-column>

                    <el-table-column
                            sortable="custom"
                            prop="staff_score"
                            label="员工总工分"
                            width="50">
                    </el-table-column>


                    {#                    <el-table-column#}
                    {#                            prop="staff_id"#}
                    {#                            label="负责人"#}
                    {#                            width="120">#}
                    {#                    </el-table-column>#}

                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="130">
                        <template slot-scope="scope">

                            <el-button icon="el-icon-s-marketing" size="mini" style="color:blue;"
                                       @click="getUserEchartData(scope.$index, schArr)"></el-button>


                            <el-button
                                    icon="el-icon-delete" size="mini" style="color:orangered;"
                                    @click.native.prevent="deleteRow(scope.$index, schArr)"
                            >

                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>


        <div class="resource-page" style="margin-top:15px;">
            <!-- 分页区域 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 7, 10, 15,50]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    class="fyDiv"
                    :total="tableData.length">
            </el-pagination>
        </div>

        <el-dialog
                title="员工工作进展图表"
                :modal-append-to-body='false'
                :visible.sync="chartdialogVisible"
                width="50%"
                @open="open()"
                append-to-body>
            <div id="myChart" style="width:100%;height:400px;padding-top:40px"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="chartdialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="chartdialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>


    </div>






{% endblock %}


{% block JSI %}
    <script src="{% static 'axios/axios.min.js' %}"></script>
    <script src="{% static 'vue/vue.js' %}"></script>
    <script src="{% static 'elementui/index.js' %}"></script>

    <script>
        new Vue({
            el: '#app',
            delimiters: ["[[", "]]"],
            data: {
                loading: false,   // 默认为false不显示加载
                inputText: "",    //搜索框的值

                schArr: [], // 此数组会由getBlogList()函数调用由articleList[]数组提取的部分数据存入来控制页面显示数据条数
                tableData: [],
                addFormVisible: false,
                chartdialogVisible: false,
                //编辑对话框
                FormVisible: false,
                Form: {
                    staff_num: 0,
                    name: '',
                    gender: false,
                    deposit_amount: '',
                    customer_relationship_type: '',
                    customer_relationship_state_id: '',
                    financial_product: false,
                    fund_products: false,
                    investment_assets: false,
                    add_weChat: false,
                    contract_stock: false,
                    yield_enhanced_products: false,
                    equity_public_offering: false,
                    small_t_one_assets: false,
                    stock_financing: false,
                    more_t_one_assets: false,
                    Private_equity_products: false,
                    configure_China: false,
                    is_delete: false,
                    staff_id: '',
                },

                deposit_amount_choice: '',
                customer_relationship_type_choice: '',
                customer_relationship_state_choice: '',
                staff_lis_choice: '',

                // 总数
                total: 0,
                currentPage: 1,
                pagesize: 50,
                option: {
                    title: {
                        text: 'World Population'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        //单位%
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                    },
                    series: [
                        {
                            color: ['#00ff00'],
                            name: '2011',
                            type: 'bar',
                            data: [18203, 23489, 29034, 104970, 131744, 630230]
                        },
                    ]
                },
            },
            created() {
                this.receive_data();

            },
            methods: {

                //对字段进行设置文字颜色
                getUserEchartData(index, row) {
                    //当表格排序后得到的索引值不是真实的索引值，所以需要重新获取索引值
                    let index1 = this.schArr.indexOf(row[index]);
                    this.chartdialogVisible = true;

                    console.log(row[index1].staff_num)

                    //获取员工工作进展图表数据

                    axios.post('/dashboard/statistics/', {
                        user_num: row[index].staff_num,
                    }).then(response => {
                        if (!response.data.code) {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        } else {
                            {#console.log(response.data);#}
                            this.option.yAxis.data = response.data.yAxis_data;
                            this.option.title.text = response.data.title + '的客户签约率';
                            this.option.series[0].data = response.data.series_data;
                            this.option.series[0].name = '签约率';
                            this.initEchartData();
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                },
                initEchartData() {
                    var dom = document.getElementById("myChart");
                    {#console.log(dom);#}
                    let myChart = echarts.init(dom, 'wonderland');
                    {#console.log('myChart', myChart)#}
                    // 绘制图表失败
                    myChart.setOption(this.option);

                    {#console.log(dom);#}
                },

                open() {
                    this.$nextTick(() => {
                        //  执行echarts方法
                        this.initEchartData()
                    })
                },


                //导出表格数据excel
                exportExcel() {
                    window.location.href = '/staff/export_excel/';

                },


                //排序方法
                sortChange(column) {
                    //如果是staff_num字段则进行排序
                    if (column.prop === 'staff_num') {
                        if (column.order === 'ascending') {
                            this.schArr.sort(function (a, b) {
                                return a.staff_num - b.staff_num;
                            });
                        } else {
                            this.schArr.sort(function (a, b) {
                                return b.staff_num - a.staff_num;
                            });
                        }
                    } else if (column.prop === 'name') {
                        //如果是name字段则进行排序
                        if (column.order === 'ascending') {
                            this.schArr.sort(function (a, b) {
                                return a.name.localeCompare(b.name);
                            });
                        } else {
                            this.schArr.sort(function (a, b) {
                                return b.name.localeCompare(a.name);
                            });
                        }
                    }else if (column.prop === 'staff_score') {
                        if (column.order === 'ascending') {
                            this.schArr.sort(function (a, b) {
                                return a.staff_score - b.staff_score;
                            });
                        } else {
                            this.schArr.sort(function (a, b) {
                                return b.staff_score - a.staff_score;
                            });
                        }
                    } else if (column.prop === 'level') {
                        if (column.order === 'ascending') {
                            this.schArr.sort(function (a, b) {
                                return a.level.localeCompare(b.level);
                            });
                        } else {
                            this.schArr.sort(function (a, b) {
                                return b.level.localeCompare(a.level);
                            });
                        }
                    } else if (column.prop === 'team_id') {
                        if (column.order === 'ascending') {
                            this.schArr.sort(function (a, b) {
                                return a.team_id.localeCompare(b.team_id);
                            });
                        } else {
                            this.schArr.sort(function (a, b) {
                                return b.team_id.localeCompare(a.team_id);
                            });
                        }
                    } else {
                        sort_item_list= ['customer_count', 'financial_product_count', 'fund_products_count', 'investment_assets_count',
                                        'add_weChat_count', 'contract_stock_count', 'yield_enhanced_products_count', 'equity_public_offering_count',
                                        'small_t_one_assets_count', 'stock_financing_count', 'more_t_one_assets_count', 'Private_equity_products_count',
                                        'configure_China_count'];
                        if (sort_item_list.indexOf(column.prop) !== -1) {
                            if (column.order === 'ascending') {
                                this.schArr.sort(function (a, b) {
                                    return a[column.prop] - b[column.prop];
                                });
                            } else {
                                this.schArr.sort(function (a, b) {
                                    return b[column.prop] - a[column.prop];
                                });
                            }
                        }
                    }
                    //更新schArr数组
                    {#this.schArr = this.tableData.slice(0, this.pagesize);#}

                },

                search() {
                    if (this.inputText) {
                        {#console.log(this.inputText);#}
                        this.schArr = this.tableData.filter(item => {
                            return item.name.indexOf(this.inputText) > -1
                        })
                    } else {
                        this.schArr = this.tableData
                    }
                },

                //点击关闭dialog
                handleClose(done) {
                    //  done();
                    //  location.reload();
                    this.FormVisible = false;
                },
                //点击取消
                handleCancel(formName) {
                    this.FormVisible = false;
                },


                handleSizeChange(val) {
                    {#console.log(`每页 ${val} 条`);#}
                    this.pagesize = val;
                    this.getPageData();
                    {#console.log(this.pagesize);#}
                },
                handleCurrentChange(val) {
                    {#console.log(`当前页: ${val}`);#}
                    this.currentPage = val;
                    this.getPageData();
                    {#console.log(this.currentPage);#}
                },

                deleteRow(index, rows) {
                    //获取当前行对象
                    let row = rows[index].staff_num;
                    console.log(row);
                    //提示框
                    this.$confirm('是否删除该客户, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //删除数据
                        axios.post('/staff/delete/', {
                            staff_num: rows[index].staff_num,
                        }).then(function (response) {
                            console.log(response);
                        }).catch(function (error) {
                            console.log(error);
                        });
                        //删除表格数据
                        rows.splice(index, 1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        //加载数据
                        {#this.receive_data();#}
                        //刷新页面
                        window.location.reload();
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                headStyle() {
                    return "text-align:center;background-color:#f2f2f2;color:#000000;font-weight:bold;font-size:12px";
                },

                rowStyle(row) {
                    if (row.column.label === '权限级别' && row.row.level === '团队长') {
                        return "text-align:center;color:#ff9966"
                    } else if (row.column.label === '权限级别' && row.row.level === '负责人') {
                        return "text-align:center;color:#ff3300"
                    } else {
                        return "text-align:center;color:#2d8cf0"
                    }


                },

                // 根据分页设置的数据控制每页显示的数据条数及页码跳转页面刷新
                getPageData() {
                    let start = (this.currentPage - 1) * this.pagesize;
                    let end = start + this.pagesize;
                    {#console.log('start', start)#}
                    {#console.log('end', end)#}
                    this.schArr = this.tableData.slice(start, end);
                    {#console.log(this.schArr)#}
                },


                //接收后端EXPERIMENTAL_BASIC_API的数据
                receive_data() {
                    var self = this;
                    self.loading = true;
                    axios.get('/staff/post/').then(function (response) {
                        //根据每页显示的数量处理数据显示个数
                        console.log('response', response.data);
                        self.tableData = response.data.staff_list_data;
                        console.log('tableData', self.tableData);
                        self.loading = false
                        {#self.deposit_amount_choice = response.data.res_choice.deposit_amount_choice;#}
                        {#self.customer_relationship_type_choice = response.data.res_choice.customer_relationship_type_choice;#}
                        {#self.customer_relationship_state_choice = response.data.res_choice.customer_relationship_state_choice;#}
                        {#self.staff_lis_choice = response.data.res_choice.staff_lis_choice;#}
                        {#console.log(self.deposit_amount_choice, self.customer_relationship_type_choice, self.customer_relationship_state_choice);#}
                        self.getPageData()


                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        })
    </script>






{% endblock %}